<template>
<!-- 导航栏''档案''按钮显示组件,在Company组件的Main方显示 -->
  <div>
      <!-- 蒙版 -->
      <div class="mb" v-show="mb" @click="closeEnroll"></div>
      <!-- 编辑个人档案 -->
      <div id="editArchives" v-show="editA">
        <h1><i class="el-icon-edit-outline"></i> 修改档案</h1>
         <el-form :label-position="labelPosition" label-width="80px" :model="editArchives">

                <el-row>
                    <el-col :span="11">
                        <el-form-item label="姓名">
                             <el-input v-model="editArchives.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="职位">
                            <el-input v-model="editArchives.position" placeholder="请输入职位"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="11">
                        <el-form-item label="生日">
                             <el-input v-model="editArchives.birthday" type="date" placeholder="请选择日期"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="ID">
                            <el-input v-model="editArchives.id" placeholder="请输入ID"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="经验">
                            <el-select v-model="editArchives.experience" placeholder="请选择经验">
                                <el-option label="在校生" value="在校生"></el-option>
                                <el-option label="应届生" value="应届生"></el-option>
                                <el-option label="3~5年" value="3~5年"></el-option>
                                <el-option label="3~5年" value="3~5年"></el-option>
                                <el-option label="5年以上" value="5年以上"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="学历">
                            <el-select v-model="editArchives.education" placeholder="请选择学历">
                                <el-option label="中专" value="中专"></el-option>
                                <el-option label="大专" value="大专"></el-option>
                                <el-option label="本科" value="本科"></el-option>
                                <el-option label="研究生" value="研究生"></el-option>
                                <el-option label="博士" value="博士"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="11">
                        <el-form-item label="出勤情况">
                             <el-rate v-model="editArchives.attendance" style="margin-top:12px;"></el-rate>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="绩效情况">
                             <el-rate v-model="editArchives.achievements" style="margin-top:12px;"></el-rate>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="奖励情况">
                           <el-input type="textarea" v-model="editArchives.reward" rows="2px"></el-input>
                           <!-- <el-rate v-model="newArchives.reward" style="margin-top:12px;"></el-rate> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="惩罚情况">
                             <el-input type="textarea" v-model="editArchives.punishment"></el-input>
                             <!-- <el-rate v-model="newArchives.punishment" style="margin-top:12px;"></el-rate> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="个人评价">
                    <el-input type="textarea" v-model="editArchives.comment"></el-input>
                </el-form-item>

                <el-button type="primary" @click="saveEdit()" class="save">保存</el-button>

        </el-form>
      </div>
      <!-- 新建档案 -->
      <div id="newArchives" v-show="newA">
        <h1><i class="el-icon-s-custom"></i> 新建档案</h1>
        <el-form :label-position="labelPosition" label-width="80px" :model="newArchives">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="姓名">
                             <el-input v-model="newArchives.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="职位">
                            <el-input v-model="newArchives.position" placeholder="请输入职位"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="生日">
                             <el-input v-model="newArchives.birthday" type="date" placeholder="请选择日期"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="ID">
                            <el-input v-model="newArchives.jookerid" placeholder="请输入ID"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="经验">
                            <el-select v-model="newArchives.experience" placeholder="请选择经验">
                                <el-option label="在校生" value="在校生"></el-option>
                                <el-option label="应届生" value="应届生"></el-option>
                                <el-option label="3~5年" value="3~5年"></el-option>
                                <el-option label="3~5年" value="3~5年"></el-option>
                                <el-option label="5年以上" value="5年以上"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="学历">
                            <el-select v-model="newArchives.education" placeholder="请选择学历">
                                <el-option label="中专" value="中专"></el-option>
                                <el-option label="大专" value="大专"></el-option>
                                <el-option label="本科" value="本科"></el-option>
                                <el-option label="研究生" value="研究生"></el-option>
                                <el-option label="博士" value="博士"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="11">
                        <el-form-item label="出勤情况">
                            <!-- <el-select v-model="newArchives.attendance" placeholder="请选择出勤情况">
                                <el-option label="优秀" value="优秀"></el-option>
                                <el-option label="良好" value="良好"></el-option>
                                <el-option label="合格" value="合格"></el-option>
                                <el-option label="不合格" value="不合格"></el-option>
                             </el-select> -->
                             <el-rate v-model="newArchives.attendance" style="margin-top:12px;"></el-rate>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="绩效情况">
                            <!-- <el-select v-model="newArchives.achievements" placeholder="请选择出勤情况">
                                <el-option label="优秀" value="优秀"></el-option>
                                <el-option label="良好" value="良好"></el-option>
                                <el-option label="合格" value="合格"></el-option>
                                <el-option label="不合格" value="不合格"></el-option>
                            </el-select> -->
                            <el-rate v-model="newArchives.achievements" style="margin-top:12px;"></el-rate>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="11">
                        <el-form-item label="奖励情况">
                           <el-input type="textarea" v-model="newArchives.reward" rows="2px"></el-input>
                           <!-- <el-rate v-model="newArchives.reward" style="margin-top:12px;"></el-rate> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="11">
                        <el-form-item label="惩罚情况">
                             <el-input type="textarea" v-model="newArchives.punishment"></el-input>
                             <!-- <el-rate v-model="newArchives.punishment" style="margin-top:12px;"></el-rate> -->
                        </el-form-item>
                    </el-col>
                </el-row>

                
                 
                <el-form-item label="个人评价">
                    <el-input type="textarea" v-model="newArchives.comment"></el-input>
                </el-form-item>
                <el-button type="primary" @click="svaeNew()" class="save">保存</el-button>
        </el-form>
      </div>
      <!-- 档案合集 -->
      <div class="content">
           <div class="top">
              <div class="newleft" @click="newArch()">
                  <h1 class="name">新建档案</h1>
                  <i class="el-icon-folder-add cc"></i>
              </div>
              
              <div class="newright">
                  <el-row>
                      <el-input v-model="search" placeholder="请输入姓名"></el-input><i class="el-icon-search  bb" @click="searchArch()"></i>
                  </el-row>
              </div>
           </div>
           <el-row>
               <h1 v-show="noSearch" class="noSearch">查无此人，请先添加档案！</h1>
           </el-row>
           <el-row  class="archives" v-for="(i,index) in allArch" :key="index">
                <el-col :span="18" class="left">
                    <div style="cursor: pointer;">
                        <label class="archivesName">{{i.username}}</label>
                        <i class="el-icon-edit aa" @click="editArch(i)"> {{i.department}}</i>
                    </div>
                    <div>
                        <i class="el-icon-s-check aa"> {{i.education}}</i>
                        <i class="el-icon-present aa"> {{i.birthday}}</i>
                        <i class="el-icon-date aa"> {{i.workage}}</i>
                    </div>
               </el-col>
               <el-col :span="6">
                    <div class="block">
                        <span>出勤情况</span>
                        <el-rate 
                            v-model="i.appear"
                            disabled
                            show-score
                            text-color="#ff9900"
                          ></el-rate>
                    </div>
                    <div class="block">
                        <span>绩效完成情况</span>
                        <el-rate
                            v-model="i.complete"
                            disabled
                            show-score
                            text-color="#ff9900"
                          >
                        </el-rate>
                     </div>
               </el-col>
           </el-row >
     </div>
</div>
</template>

<style lang="less" scoped>
.noSearch{
    text-align: center;
}
.mb{
    width:100%;
    height: 100%;
    background-color: rgb(109, 109, 109);
    opacity: 0.2;
    position: absolute;
    top: 0;
    z-index:1;
}
#editArchives,#newArchives{
    overflow: auto;
    z-index: 10;
    position: absolute;
    top:5px;
    width: 35%;
    height: 99%;
    background-color: #fff;
    left: 32.5%;
    opacity: 1;
    padding: 0 25px;
    border-radius: 2px;
    box-shadow: 10px 10px 5px #888888;
    overflow: auto;
    .aaa{
        margin-right: 0px;
    }
    h1{
        color: #18a3b1;
    }
    .save{
        background-color: #18a3b1;
        // margin-left: 233px;
        float: right;
        margin: 10px 0px;
    }
}
.top{
    width: 100%;
    height: 100px;
    background-color: #fff;
    .newleft{ 
         cursor: pointer;
         width: 40%;
         float: left;
         .name{
            display: inline;
            text-align: center;
            line-height: 100px;
            margin-left: 50px;
            color: #5e5d5d;
        }
        .cc{ 
            font-size: 25px;
            line-height: 100px;
            margin-left: 10px;
            color: #5e5d5d;
        }
    }
    .newright{
        width: 30%;
        // background-color: #18a3b1;
        display: inline;
        float: right;
        .el-input{
        width: 70%;
        height: 30px;
        line-height: 100px;
        float: left;
        border: none;
    }
    }
    .bb{ 
        width: 40px;
        height: 37px;
        float: left;
        font-size: 20px;
        line-height: 37px;
        text-align: center;
        border: 2px solid #ecebeb;
        margin-top: 29.5px;
        background-color: #eeeeee;
    }

    }
.content{
    overflow: auto;
    height: calc(88vh);
    width: 90%;
    background-color: #fff;
    margin:0 auto;
    // margin-top: calc(2vh);
    margin-top: -15px;
    border-radius: 5px;
}
.archives{
    background-color: #eeeeee;
    margin-bottom: 20px;
    .left{
        .archivesName{
            margin-left: 30px;
            color: #18a3b1;
            font-size: 24px;
            // letter-spacing: 5px;
        }
        .aa{
            margin-left: 50px;
            margin-right: 15px;
            color: #868686;
        }
     }
    .block{
    text-align: right;
    padding-right: 50px;
    color: #868686;
    .el-rate{
       display:inline;
       margin-left: 10px;
    }
}
}
</style>

<script>
export default {
    component:{ },
    data(){
        return{
            noSearch:false,
            value1: 3.5,
            value2: 4,
            //搜索的姓名
            search:'',
            labelPosition: 'left',
            newA:false,
            editA:false,
            mb:false,

            editArchives: {
                name: '',
                position: '',
                education:'',
                experience:'',
                attendance:'',
                achievements:'',
                reward:'',
                punishment:'',
                id:'',
                birthday:'',
                comment:''
            },
            newArchives:{
                name: '',
                position: '',
                education:'',
                experience:'',
                attendance:'',
                achievements:'',
                reward:'',
                punishment:'',
                jookerid:'',
                birthday:'',
                comment:''
            },

            allArch:[]
        }
    },
    methods:{
        //点击修改档案获取该档案的旧信息进行渲染
        editArch(i){
            console.log(i);
            this.mb = true
            this.editA = true
            this.editArchives.name = i.username
            this.editArchives.position =  i.department
            this.editArchives.education = i.education
            this.editArchives.experience = i.workage
            this.editArchives.attendance = i.appear
            this.editArchives.achievements = i.complete
            this.editArchives.reward = i.reward
            this.editArchives.punishment = i.punish
            this.editArchives.birthday = i.birthday
            this.editArchives.comment = i.comment
            this.editArchives.id = i.jobseekerid
        },
        newArch(){
            this.mb = true
            this.newA = true
        },
        closeEnroll(){
            this.mb = false
            this.newA = false
            this.editA = false
        },
        //保存新建的档案
        svaeNew(){
            // console.log(this.newArchives);
            let a = this.newArchives
            if(a.jookerid&&a.name&&a.position&&a.education&&a.attendance&&a.achievements&&a.reward&&a.punishment&&a.birthday&&a.comment){
                depot.post({
                url:'/empservice/archives/addArchive',
                data:{
                    "username": this.newArchives.name,
                    "department": this.newArchives.position,
                    "birthday": this.newArchives.birthday,
                    "jobseekerid": this.newArchives.jookerid,
                    "workage": this.newArchives.experience,
                    "education": this.newArchives.education,
                    "appear": this.newArchives.attendance,
                    "complete":this.newArchives.achievements,
                    "reward": this.newArchives.reward,
                    "punish": this.newArchives.punishment,
                    'comment': this.newArchives.comment
                },
                cb:(res)=>{
                    // console.log(res);
                    alert(res.message)
                    this.closeEnroll()
                    this.getAllArch(1,100)
                }
            })
            }else{
                alert("请输入完整信息")
            }
           

        },
        //保存修改的档案
        saveEdit(){
            // console.log(this.editArchives);
            // alert(this.editArchives.name)
            // alert("保存编辑!")
            depot.post({
                url:"/empservice/archives/updateArchive/"+this.editArchives.id,
                data:{
                    username:this.editArchives.name,
                    department : this.editArchives.position,
                    birthday: this.editArchives.birthday,
                    education : this.editArchives.education,
                    workage : this.editArchives.experience,
                    appear : this.editArchives.attendance,
                    complete : this.editArchives.achievements,
                    reward : this.editArchives.reward,
                    punish : this.editArchives.punishment,
                    comment: this.editArchives.comment,
                    id: this.editArchives.id,
                },
                cb:(res)=>{
                    console.log(res);
                    alert(res.message);
                    this.closeEnroll()
                    this.getAllArch(1,100)

                }
            })
        },
        //获取所有档案
        getAllArch(current,limit){
            depot.post({
                url:'/empservice/archives/getAllArchives/'+current+"/"+limit,
                data:{},
                cb:(res)=>{
                    this.allArch = res.data.list;
                    // console.log(res);
                }
            })
        },
        //输入姓名搜索档案
        searchArch(){
          console.log(this.search);
          if(this.search){
            //   console.log(this.allArch);
              for(var i in this.allArch){
                  if(this.search == this.allArch[i].username){
                      this.noSearch = false
                      depot.get({
                          url:"/empservice/archives/getDetailById/"+this.allArch[i].jobseekerid,
                          cb:(res)=>{
                              this.allArch = res.data
                              console.log(res);
                          }
                      })
                  }else{
                       this.allArch = ''
                       this.noSearch = true
                  }
              }
          }else if(this.allArch == ''){
            this.noSearch = false
            this.getAllArch(1,200)
         }else{
             alert("请输入搜索姓名")
         }
        }
    },
    mounted:function(){
        this.getAllArch(1,100)
    }
}
</script>